<template>
	<Item class="item" title="动画" :titleList="titleList1" :isPage="true" imgMaxHeight="124px">
		<template  v-for="(item,index) in dongman">
			<div class="itme-img itme-img-first" v-if="index == 0">
				<div class="dongman-img">
					<img :src="item.imageUrl">
					<div></div>
					<span>{{ item.meta }}</span>
				</div>
				<h3>{{ item.name }}</h3>
				<h4>{{ item.description }}</h4>
			</div>
			<div class="itme-img" v-else>
				<div class="dongman-img">
					<img :src="item.imageUrl">
					<div></div>
					<span>{{ item.meta }}</span>
				</div>
				<h3>{{ item.name }}</h3>
				<h4>{{ item.description }}</h4>
			</div>
		</template>
	</Item>
	<Item title="纪录片" :titleList="titleList2" :isPage="true">
		<template  v-for="(item,index) in jilupian">
			<div class="itme-img itme-img-first" v-if="index == 0">
				<div class="jilupian-img">
					<img :src="item.imageUrl">
					<div></div>
					<span>{{ item.meta }}</span>
				</div>
				<h3>{{ item.name }}</h3>
				<h4>{{ item.description }}</h4>
			</div>
			<div class="itme-img" v-else>
				<div class="jilupian-img">
					<img :src="item.imageUrl">
					<div></div>
					<span>{{ item.meta }}</span>
				</div>
				<h3>{{ item.name }}</h3>
				<h4>{{ item.description }}</h4>
			</div>
		</template>
	</Item>
	<Item title="换洗的一天" :titleList="titleList3"></Item>
</template>

<script>
import Item from './components/Item.vue'
import axios from 'axios'
export default {
	name: 'App',
	mounted(){
		const that = this;
		let url = "https://pcw-api.iqiyi.com/strategy/pcw/data/indexCsr2Data";
		axios.get(url)
		.then(function (response) {
			//动漫
			that.dongman = response.data.data.formatData.dongman.list;
			that.dongman = that.dongman.slice(0,7);
			//纪录片
			that.jilupian = response.data.data.formatData.jilupian.list;
			that.jilupian = that.jilupian.slice(0,7);
		});
	},
	components:{
		Item
	},
	data() {
		return {
			dongman:[],
			jilupian:[],
			titleList1:["热播动画","国产动画","日本动画","动态漫画"],
			titleList2:["辣子曰","生门·纪实剧","中国医生","地球脉动","恐龙星球","从秦始皇到汉武帝","BBC：海洋"],
			titleList3:["睡觉","拉肚子","感冒","牙齿痛","洗脸","黄码","没笔"]
		};
	}
};
</script>

<style>
	.dongman-img,.jilupian-img{
		width: 100%;
		overflow-y: hidden;
		position: relative
	}
	.dongman-img > div,.jilupian-img > div{
		width: 100%;
		height: 100%;
		position: absolute;
   		top: 0;
		background-color: rgba(0,0,0,0.2);
	}
	.dongman-img{
		height: 124px;
	}
	.jilupian-img{
		height: 293px;
	}
	.dongman-img > span,.jilupian-img > span{
		position: absolute;
		right: 5px;
		bottom: 5px;
		font-size: 12px;
		color: #ffffff;
	}
	.itme-img{
		width: 13%;
		float: left;
		margin-left: 1.5%;
	}
	.itme-img-first{
		margin: 0;
	}
	.itme-img > div > img{
		max-width: 100%;
		border-radius: 5px;
	}
	.itme-img > h3{
		font-size: 16px;
		height: 26px;
		line-height: 26px;
		color: #ffffffe6;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.itme-img > h4{
		height: 24px;
		line-height: 24px;
		font-size: 14px;
		color: #ffffff80;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
</style>
